<template>
  <div>
    <el-calendar v-model="value">
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <div :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
        </div>
        <div v-for="item in tableData">
          <div v-if="(item.orderdate).indexOf(data.day) != -1" style="width: 25px;height: 25px"></div>
          <div v-if="(item.orderdate).indexOf(data.day) != -1" style="color: red">
            <span>已预约人数:{{item.reservations}}</span>
            <span>可预约名额:{{item.number}}</span>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import {tOrdersettingList} from '@/api/lgx/setup'
  export default {
  data(){
    return{
      value:new Date(),
      tableData:[],
      tableData2:[],
      rs:'',
    }
  },
    created() {
      tOrdersettingList().then(response=>{
        console.log(response.data)
      })
    this.select();
    },
    methods:{
     async select(){
       try{
         let [aaa]=await Promise.all([
           tOrdersettingList()
         ])
         this.tableData2=aaa.data;
         for(var i=0;i<aaa.data.length;i++){
           this.tableData2[i].orderdate=this.sj(this.tableData2[i].orderdate)
         }
         this.tableData=this.tableData2;
       }catch(error){
         console.log(error)
       }
     },
      sj(data){
        var dt=new Date(data)
        var n=dt.getFullYear();
        var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
        var r=(dt.getDate()).toString().padStart(2,"0");
        dt.getHours();
        dt.getMinutes();
        dt.getSeconds();
        return n+"-"+y+"-"+r;
      }
   }
}
</script>

<style>
  .is-selected {
    color: #1989FA;
  }
  span{
    font-size:13px;
  }
</style>
